<template>
  <div class="component-connector-create-dialog-view">
    
    <ConnectorModuleCreateConnectorDialog
      :key="componentKey"
      :title="title" 
      :visible="isShowCreateConnectorModal" 
      :bizTypeId="bizTypeId"
      :toBizType="toBizType"
      :fromBizType="fromBizType"
      :fromBizTypeName="fromBizTypeName"
      :isFetchModuleUseToBizType="false"
      @close="closeCreateConnectorHandler"
      @finish="finishCreateConnectorHandler"
      @prev="portPrevHandler"
      @next="portNextHandler"
    />
    
  </div>
</template>

<script>
/* components */
import { ConnectorModuleCreateConnectorDialog } from '@src/modules/connector'
/* util */
import qs from 'qs'
import { uuid } from 'pub-bbx-utils'

export default {
  name: 'component-connector-create-dialog-view',
  components: {
    ConnectorModuleCreateConnectorDialog
  },
  data () {
    return {
      isShowCreateConnectorModal: false,
      connectorInfo: {},
      componentKey: uuid()
    }
  },
  computed: {
    query() {
      return qs.parse(window.location.search.substr(1));
    },
    bizTypeId() {
      return this.connectorInfo.bizTypeId || this.query.bizTypeId
    },
    toBizType() {
      return this.connectorInfo.toBizType || this.query.toBizType
    },
    fromBizType() {
      return this.connectorInfo.fromBizType || this.query.fromBizType
    },
    fromBizTypeName() {
      return this.connectorInfo.fromBizTypeName || this.query.fromBizTypeName
    },
    title() {
      return this.connectorInfo.title || this.query.title || '新建附加组件'
    }
  },
  mounted () {
    this.postReadySuccessMessage()
    this.addMessageEventListeners()
    this.showDialog()
  },
  methods: {
    // 添加消息事件监听
    addMessageEventListeners () {
      
      // 监听父页面消息
      window.addEventListener('message', ({ data }) => {
        
        console.log('window.addEventListener ~ data', data)
        
        if (data.connector) {
          
          this.connectorInfo = data.connector
          
          this.$nextTick(this.rerender)
          
        }
        
      })
      
    },
    // 关闭弹窗
    closeDialog() {
      this.isShowCreateConnectorModal = false
    },
    // 关闭弹窗事件
    closeCreateConnectorHandler() {
      this.postCloseDialogMessage()
      this.closeDialog()
    },
    // 完成创建事件 
    finishCreateConnectorHandler() {
      this.closeDialog()
      this.postFinishCreateConnectorMessage()
    },
    rerender() {
      this.componentKey = uuid()
    },
    // 显示弹窗
    showDialog() {
      this.isShowCreateConnectorModal = true
    },
    // 上一步
    portPrevHandler() {
      this.postMessage({ prev: true })
    },
    // 下一步
    portNextHandler() {
      this.postMessage({ next: true })
    },
    // 通知父页面关闭弹窗
    postCloseDialogMessage() {
      this.postMessage({ close: true })
    },
    // 通知父页面加载完成
    postReadySuccessMessage() {
      this.postMessage({ ready: true })
    },
    // 通知父页面创建完成
    postFinishCreateConnectorMessage() {
      this.postMessage({ finish: true })
    },
    // 通知父页面发送消息
    postMessage(data) {
      
      console.log('postMessage ~ data', data)
      
      window.parent.postMessage(data, '*')
      
    }
  }
}
</script>

<style lang="scss">

.connector-module-create-connector-name-dialog {
  
  .base-modal-body {
    
    height: 300px;
    
    .form-builder {
      height: 100%;
    }
    
  }
  
}

.connector-module-create-connector-detail-dialog,
.connector-module-create-connector-name-dialog {
  
  .base-modal {
    max-height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
  }
  
}

</style>
